<template>
  <div class="banner">
    <div @click="showImg">
      <div class="banner-img">
        <img
          src="https://imgs.qunarzz.com/sight/p0/1911/84/8493e4b6e0787877a3.img.jpg_1190x550_89fb4dbe.jpg"
          alt=""
        />
      </div>
      <div class="banner-text">重庆两江游</div>
    </div>
    <div class="banner-swiper" v-show="showSwiper" @click="notShow">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(banneritem,index) in bannerList" :key = "index"
          ><img :src="banneritem.imgUrl" alt=""
        /></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swiperOption: {
        loop:true,
        pagination:{
          el:".swiper-pagination",
          clickable:true,
          type:"fraction"
        }
      },
      showSwiper: false,
      bannerList: [
        {
          id: "01",
          imgUrl:
            "https://imgs.qunarzz.com/sight/p0/2009/ce/ce9ed2c3ce42ad1fa3.img.jpg_1190x550_53a672c6.jpg",
        },
        {
          id: "02",
          imgUrl:
            "https://imgs.qunarzz.com/sight/p0/2009/65/65896dee04f8f2aa3.img.jpg_1190x550_334d4e19.jpg",
        },
        {
          id: "02",
          imgUrl:
            "https://imgs.qunarzz.com/sight/p0/1911/84/8493e4b6e0787877a3.img.jpg_1190x550_89fb4dbe.jpg",
        },
      ],
    };
  },
  methods: {
    showImg() {
      this.showSwiper = true;
    },
    notShow() {
      this.showSwiper = false;
    },
  },
};
</script>
<style scoped>
.banner {
  position: relative;
}
.banner-img {
  width: 100%;
  overflow: hidden;
  height: 0;
  padding-bottom: 50%;
}
.banner-img img {
  width: 100%;
}
.banner-text {
  position: absolute;
  color: white;
  font-size: 0.36rem;
  bottom: 0.5rem;
  left: 0.3rem;
}
.banner-swiper {
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner-swiper img {
  width: 100%;
}
.swiper-pagination{
  background-color: white;
  bottom: .3rem

}
</style>